<template>
    <div>
        <basicTable
        :headerData="headerData" 
        :tableData="tableData"
        :maxHeight=1000
        >
            <template v-slot:icon="{row}">
                <i :class="row.icon">{{row.icon}}</i>      
            </template>
            <template v-slot:state="{row}">
                <span class="stateColor">{{row.state}}</span>
            </template>
            <template v-slot:handle="{row}">
                <span class="listRowBtn c3c9cff">编辑</span><span class="listRowBtn cff5722">禁用</span>
        </template>
        </basicTable>

    </div>
</template>
<script>
    import basicTable from "@/components/basicTable";
    export default{
        name:"typeExpense",
        data(){
            return{
                // 表头数据
                headerData:[
                    {
                       prop:"id",
                       label:"ID号",
                       width:"80",
                       align:"center"
                    },
                    {
                        prop:"name",
                        label:"审批类型名称",
                        min_width:"120",
                        align:"left"
                    },
                    {
                        prop:"mark",
                        label:"审批类型标识",
                        min_width:"120",
                        align:"left"
                    },
                    {
                        prop:"icon",
                        label:"审批类型图标",
                        min_width:"120",
                        align:"left",
                        slot:true
                    },
                    {
                        prop:"sort",
                        label:"所属分类",
                        width:"100",
                        align:"center"
                    },
                    {
                        prop:"state",
                        label:"状态",
                        width:"100",
                        align:"center",
                        slot:true
                    },
                    {
                        prop:"handle",
                        label:"操作",
                        width:"100",
                        align:"center",
                        slot:true
                    }
                ],
                // 表格内数据
                tableData: [
                    {
                        id:"1",
                        name:"请假",
                        mark:"qingjia",
                        icon:"iconfont icon-basicData",
                        sort:"假勤",
                        state:"正常",
                    }, 
                    {
                        id:"1",
                        name:"请假",
                        mark:"qingjia",
                        icon:"iconfont icon-basicData",
                        sort:"假勤",
                        state:"正常",
                    }, 
                    {
                        id:"1",
                        name:"请假",
                        mark:"qingjia",
                        icon:"iconfont icon-basicData",
                        sort:"假勤",
                        state:"正常",
                    }, 
                    
                ]
            }
        },
        components:{
            basicTable
        },
    }
</script>
<style lang="less">
    *{
        margin: 0;
        padding: 0;
    }
    .iconfont{
        font-size: 14px;
    }
    .stateColor{
        color: #47b347;
    }
    .listRowBtn{
        border-radius: 2px 0 0 2px;
        line-height: 22px;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
        padding: 3px 6px;
    } 
    .c3c9cff{
        background-color: #3c9cff;
    }
    .cff5722{
        background-color: #ff5722;
    }
</style>